<style scoped lang="less">
.card-list {
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .search {
        display: flex;
        flex-direction: row-reverse;
        align-content: center;
        .search-input {
            margin-right: 15px;
            width: 200px;
        }
    }
    .list {
        .el-col-4 {
            width: 180px;
            margin: 20px;
        }
        .card-col {
            .card {
                cursor: pointer;
                border-radius: 15px;
                border: 1px solid #f1f1f1;
                background-color: #f1f1f1 !important;
                width: 180px;
                height: 200px;
                .image {
                    width: 100%;
                    height: 150px;
                }
                .comment {
                    text-align: center;
                    padding: 6px 10px 10px 10px;
                }
            }
        }
    }
    .page-content {
        padding-top: 60px;
        display: flex;
        flex-direction: row-reverse;
    }
    .empty-text {
        text-align: center;
    }
}
</style>

<template>
    <div class="card-list">
        <div class="search">
            <el-button class="search-button"
                       size="small"
                       type="primary"
                       @click="searchClick">
                <i class="el-icon-search icon-right" />查询
            </el-button>
            <el-input class="search-input"
                      size="small"
                      v-model="searchInput"
                      placeholder="请输入查询关键字"
                      prefix-icon="el-icon-search" />
        </div>
        <el-row class="list">
            <el-col class="card-col"
                    v-for="(item, index) in list"
                    :span="4"
                    :key="item.id">
                <el-card class="card"
                         shadow="never"
                         :body-style="{ padding: '0px' }">
                    <img class="image"
                         :src="`api${item.thumbPic}`"
                         @click="cardClick(item)">
                    <div class="comment">
                        <span>
                            {{item.title ? item.title : '知识中心'}}
                        </span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="page-content">
            <el-pagination v-show="list.length"
                           background
                           small
                           layout="prev, pager, next"
                           :total="total"
                           @current-change="pageChange" />
        </div>
        <div v-show="!list.length"
             class="empty-text">暂无数据</div>
    </div>
</template>

<script>
    export default {
        name: 'card-list',
        props: {
            list: {
                type: Array,
                default: () => []
            },
            total: {
                type: Number,
                default: 0
            },
            onCardClick: {
                type: Function,
                default: () => {}
            },
            onPageChange: {
                type: Function,
                default: () => {}
            },
            onSearchClick: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                searchInput: ''
            }
        },
        mounted() {},
        methods: {
            cardClick(row) {
                this.onCardClick && this.onCardClick(row)
            },
            pageChange(page) {
                this.onPageChange && this.onPageChange(page)
            },
            searchClick() {
                this.onSearchClick && this.onSearchClick(this.searchInput)
            }
        }
    }
</script>

